{% extends 'base.html' %}
{% block title_suffix %}
    {% if edit_page %}
		| edit page
	{% else %}
		| create page
	{% endif %}
	
{% endblock %}

{% block content %}
	 {% if edit_page %}
	<div class="page-header">
		<h1 id="page-title">Edit Page<small> {{edit_page.title}}</small></h1>
	</div>
	{% else %}
	<div class="page-header">
		<h1>Create Page<small> Create a Sub Page</small></h1>
	</div>
	{% endif %}
	
	{% if missing_title %}
	<div class="alert">
			 Please fill in a title
	</div>
	{% endif %}
	{% if page_saved %}
	<div class="alert">
		Page created
	</div>
{% endif %}
	{% if edit_page %}
		<form id="page-form" class="form_inline" action="#" method="post">
	{% else %}
		<form action="#" method="post">
	{% endif %}
		{% csrf_token %}

		<label><strong>Title:</strong></label>
		<input type="text" id="title" name="title" {% if edit_page %} value="{{ edit_page.title }}"{% endif %}/>

		<label><strong>Content:</strong></label>
		<textarea id="editor" name="editor">{% if edit_page %}{{ edit_page.content }}{% endif %}</textarea>
		<br />
		{% if edit_page %}
		<div id="page-saving" class="progress progress-striped active" style="display: none;" >
				<div class="bar" style="width: 100%;">Saving</div>
		</div>
		<div id="save-success" class="alert alert-success" style="display: none;">
			<strong>Changes Saved!</strong> The page was successfully saved.
		</div>
    
		<div id="save-error" class="alert alert-error" style="display: none;">
			<strong>Error!</strong> Something went wrong when trying to save.
		</div>
		{% endif  %}
		<div class="form-actions">
		<div class="pull-right">

			{% if edit_page %}
			<a id="cancel" class="btn" href="{{ edit_page.get_absolute_url }}">Cancel</a>
			<button id="submit" class="btn btn-primary">	Save changes
			{% else %}
			<a id="cancel" class="btn" href="{% url 'page.views.page' %}">Cancel</a>
			<button id="save" type="submit" class="btn btn-primary">	Create page
			{% endif %}
			</button>
		</div>
	</div>
	
	</form>
{% endblock %}

{% block sidebar %}
	<div class="well">
		<div id="links">
			<legend>Link to another page</legend>
			<label><strong>Steps:</strong></label>
			<ol>
				<li>Put the cursor where you want to create the link.</li>
				<li>Click on the EO button in the linking toolbar.</li>
				<li>A dialog appears that lets you select a page from the book.</li>
			</ol>
		</div>
	</div>
{% endblock %}

{% block scripts %}
	<script type="text/javascript" src="/static/lib/ckeditor/ckeditor.js"></script>
	<script type="text/javascript" src="/static/script/setup_ckeditor.js"></script>
	{% if edit_page %}
		<script type="text/javascript" src="/static/script/page.edit_page.js"></script>
	{% endif %}
{% endblock %}
